import React, { useState } from 'react';
import { ScrollView, Text, View } from 'react-native';

const LyricsDisplay = ({ lyrics }) => {
  const [currentTime, setCurrentTime] = useState(0);

  return (
    <ScrollView style={styles.container}>
      {lyrics.map((line, index) => (
        <Text 
          key={index} 
          style={currentTime >= line.time ? styles.active : styles.line}
        >
          {line.text}
        </Text>
      ))}
    </ScrollView>
  );
};

export default LyricsDisplay;